<script type="text/javascript">//<![CDATA[
XHR.poll(10, '<%=luci.dispatcher.build_url("admin", "services", "wifidog-ng", "getClientList")%>', null,
function(x, st) {
    var tb = document.getElementById('client-list');
    var sa = document.getElementById('wifidog-ng-status');
    if (st && sa) {
        if (st.running) {
            sa.innerHTML = '<em><b><font color=green>WifiDog-ng <%:RUNNING%></font></b></em>';
        } else {
            sa.innerHTML = '<em><b><font color=red>WifiDog-ng <%:NOT RUNNING%></font></b></em>';
        }
    }

    if (tb) {
        /* clear all rows */
        while (tb.firstElementChild !== tb.lastElementChild) {
            tb.removeChild(tb.lastElementChild);
        }

        if (st && st.terminals) {
            for (var i = 0; i < st.terminals.length; i++) {
                var client = st.terminals[i];
                var timestr;

				if (client.timeout !== false) {
					timestr = '<em><%:expired%></em>';
				} else {
					timestr = String.format('%t', client.uptime);
				}

                tb.appendChild(E('<div class="tr cbi-rowstyle-%d">'.format((i % 2) + 1), [
                    E('<div class="td">', client.ip || '?'),
                    E('<div class="td">', client.ip),
                    E('<div class="td">', client.mac),
                    E('<div class="td">', bandwidth_Label(client.outgoing)),
                    E('<div class="td">', bandwidth_Label(client.incoming)),
                    E('<div class="td">', timestr)
                ]));
            }
        }

        if (tb.firstElementChild === tb.lastElementChild) {
            tb.appendChild(E('<div class="tr"><div class="td"><em><br /><%:No Authenticated Client%></em></div></div>'));
        }
    }
});

function bandwidth_Label(bytes) {
    var uby = '<%:KB%>';
    var kby = (bytes / 1024);

    if (kby >= 1024) {
        uby = '<%:MB%>';
        kby = (kby / 1024);
    }

    return String.format("%f %s", kby.toFixed(2), uby);
}
//]]></script>

<fieldset class="cbi-section">
	<legend><%:Authenticated Client%></legend>
	<div class="table" id="client-list">
		<div class="tr">
			<div class="th"><%:Hostname%></div>
			<div class="th"><%:IPv4-Address%></div>
			<div class="th"><%:MAC-Address%></div>
			<div class="th"><%:TX%></div>
			<div class="th"><%:RX%></div>
			<div class="th"><%:Uptime%></div>
		</div>
		<div class="tr">
			<div class="td"><em><br /><%:Collecting data...%></em></div>
		</div>
	</div>
	
</fieldset>
